/**
 * @author:linjiye
 * @date: 2025/1/3
 * @desc:
 **/

import {Image, StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
import React, {useEffect, useState} from 'react'
import PageScrollView from "@/components/PageScrollView";
import {FcView} from "@/components/FcView";
import PageFormBtn from "@/components/PageFormBtn";
import TabCard from "@/components/TabCard";
import FormTitle from "@/components/FormTitle";
import FcButton from "@/components/FcButton";
import {aiOriginalityData,aiInnovationData} from "@/utils/data"
import {Flex, Toast} from "@ant-design/react-native";
import RequiredIcon from "@/components/RequiredIcon";
import {LinearGradient} from "expo-linear-gradient";
import Slider from '@react-native-community/slider';
import FcSlider from "@/components/FcSlider";
import FcModal from '../FcModal';
import {router, useLocalSearchParams} from "expo-router";
import NoData from '../NoData';
import {useDispatch, useSelector} from "react-redux";
import useApiOfSSE from "@/hooks/useApiOfSSE";
import {set_params} from "@/store/reducer/morePlatforms/morePlatformsSlice";
import {
  useGetGroupTemplateListQuery,
  useGetItemListQuery,
  useGetParentListQuery, useProfitModelInfoMutation
} from "@/store/api/aiOriginality/aiOriginalityApi";
import {useDownloadFromUrlMutation, useRecognizeMutation} from "@/store/api/aiInnovation/aiInnovationApi";
import useGetStorage from "@/hooks/useGetStorage";
// import Video from "react-native-video";
import FcSearch from "@/components/FcSearch";

type Props = {}

const MorePlatformsWrap = (props: Props) => {
  const [typeList, setTypeList] = useState([
    {
      name: '提供产品',
      id: 1,
    }, {
      name: '提供服务',
      id: 2
    }
  ])
  const [textTypeList, setTextTypeList] = useState([
    {
      name: '引流型',
      id: 1,
    }, {
      name: '广告型',
      id: 2
    }
  ])
  const [banBenTypeList, setBanBenTypeList] = useState([
    {
      name: '智能版',
      id: 1,
    }, {
      name: '自定义',
      id: 2
    }
  ])
  const [zdyList,setZdyList] = useState(aiInnovationData)
  const [selectedItems, setSelectedItems] = useState([]);

  const [textTypeId,setTextTypeId] = useState<number>(-1)
  const [banBenTypeId,setBanBenTypeId] = useState<number>(1)
  const [typeId, setTypeId] = useState(typeList[0]?.id)
  const [productGroup, setProductGroup] = useState('全部')
  const [productName, setProductName] = useState('')
  const [productYL, setProductYL] = useState('')
  const [productGroupItem, setProductGroupItem] = useState({})
  const [productNameItem, setProductNameItem] = useState({})
  const [ylItem, setYlItem] = useState('')
  const [list, setList] = useState(aiOriginalityData)
  const [bigMenuId, setBigMenuId] = useState(list[0]?.id)
  const [smallMenu, setSmallMenu] = useState([])
  const [smallMenuId, setSmallMenuId] = useState(0)
  const [FcSliderZSVal, setFcSliderZSVal] = useState(100)
  const [FcSliderPSVal, setFcSliderPSVal] = useState(1)
  const [openProductGroup, setOpenProductGroup] = useState(false)
  const [openProduct, setOpenProduct] = useState(false)
  const [openProductYL, setOpenProductYL] = useState(false)
  const [groupList, setGroupList] = useState([])
  const [productList, setProductList] = useState([])
  const [ylList, setYlList] = useState([])
  const [pressedIndex, setPressedIndex] = useState(-1);
  const [bwText, setBwText] = useState('')
  const [isGetVideoLink, setIsGetVideoLink] = useState<boolean>(false)
  const [colors,setColors] = useState(['rgba(51,77,176,1)', 'rgba(198,94,253,1)'])
  const [videoLink,setVideoLink] = useState('')

  const [params, setParams] = useState({})
  const [source, setSource] = useState(null)
  const [text, setText] = useState('')

  const [groupSearchText, setGroupSearchText] = useState('')
  const [productSearchText, setProductSearchText] = useState('')

  const {url} = useLocalSearchParams()

  const {data:textTypeData,isSuccess:textTypeSuccess} = useGetGroupTemplateListQuery?.({
    versionType: 1
  })

  const {data:groupResData,isSuccess:groupSuccess, refetch:groupRefetch}= useGetParentListQuery?.({
    type: typeId,
    name: groupSearchText
  })
  const {data:productResData,isSuccess:productSuccess, refetch:productRefetch}= useGetItemListQuery?.({
    parentId: productGroupItem?.id,
    name: productSearchText
  })
  const [profitModelInfoFun] = useProfitModelInfoMutation?.()

  const [downloadFromUrlFun] = useDownloadFromUrlMutation?.({
    url: videoLink
  })
  const [recognizeFun] = useRecognizeMutation?.()

  const dispatch = useDispatch()
  let p = useSelector(state => state.morePlatforms.params)
  useEffect(() => {
    if(p) {
      setParams(p)
      setText(p.text)
    }
  }, [p]);

  useEffect(() => {
    if(url){
      let link = 'mm/aicreation/getSummaryFromUrl?url='+url
      getData(link)
    }
  }, [url]);
  useEffect(() => {
    if(textTypeSuccess) {
      setTextTypeList(textTypeData.result || [])
      // setBanBenTypeList(textTypeData?.result[0]?.list || [])
      setTextTypeId(textTypeData?.result[0]?.label)
      setZdyList(textTypeData?.result[0]?.list || [])
      let id = textTypeData?.result[0]?.list[0]?.id
      setSelectedItems([id])
    }


    handleBigMenu(list[0])

    if (groupSuccess) {
      setGroupList(groupResData.result || [])
      // setProductGroupItem(groupResData.result[0])
      // productRefetch()
    }
    if (productSuccess) {
      setProductList(productResData.result || [])
      // setProductNameItem(productResData.result[0])
      // getProfitModelInfoFun(productResData.result[0].id)
    }

  }, [groupSuccess,groupResData,productSuccess,productResData,textTypeData,textTypeSuccess])

  async function getData(url) {
    // let sourceResult = useApiOfSSE({
    //   url
    // })
    //
    // setSource(sourceResult)
    //
    // sourceResult.addEventListener('message', (e) => {
    //
    //   let res = e.data ? JSON.parse(e.data) : ''
    //   if (res.status == 'success') {
    //     let txt = res.text.replace(/(<br\/>)|(<br)/g, '');
    //     console.log('txt',txt)
    //     setText(txt)
    //
    //     if(res.stop) {
    //       dispatch(set_params({
    //         ...params,
    //         text: txt
    //       }))
    //     }
    //   } else {
    //     // createMessage.error(res.text, 2.5);
    //     // data.isAIWriting = false;
    //     sourceResult.close();
    //     // setSource(null)
    //   }
    // })

    Toast.show({
      icon: 'loading',
      content: '文案生成中...',
      duration: 0,
      // mask: false,
    })

    await useGetStorage('token').then(async (token) => {
      try {
        const response = await fetch(`${process.env.EXPO_PUBLIC_API_URL}${url}`,{
          method: 'POST',
          headers: {
            'content-type': 'application/json',
            'x-access-token': token,
          },
          body: JSON.stringify({})
        });
        console.log(response,'---');
        const blob = await response.blob();
        const reader = new FileReader();

        reader.onload = (event) => {
          const result = event.target.result;
          console.log(result,'-----result');
          // 按行分割流式数据
          const lines = result.split('\n');
          lines.forEach((line) => {
            if (line) {
              console.log(line);
              let newLine = `${line.replace('data:','')}`;
              // 在这里处理流式数据
              let res = JSON.parse(newLine)
              if (res.status == 'success') {
                let txt = res.text.replace(/(<br\/>)|(<br)/g, '');
                setText(txt)

                if(res.stop) {
                  dispatch(set_params({
                    ...params,
                    text: txt
                  }))
                }
              } else {
                if(res.stop) {
                  Toast.removeAll()
                  Toast.info(res.text);
                  dispatch(set_params({
                    ...p,
                    text: ''
                  }))
                }
              }
            }
          });
        };

        reader.onerror = (error) => {
          console.error('Error reading blob:', error);
        };

        reader.readAsText(blob);
      } catch (error) {
        console.log('Error fetching stream:', error);
      }
    })

  }


  const handleVideoLink = () => {
    downloadFromUrlFun({
      url: videoLink,
    }).then(res => {
      console.log(res,'----');
      if(res?.data?.code === 200) {
        // setVideoLink(res?.data?.result)
        // setIsGetVideoLink(true)
        let file = res.data?.result || ''
        recognizeFun({
          file: file.replace('\\','%5c')
        }).then(r => {
          let d = r?.error?.data
          let s = d?.split('","status":"success"}')[0]?.replace('data:{"text":"','')
          setBwText(s)
          setIsGetVideoLink(false)
          dispatch(set_params({
            ...params,
            text: s
          }))
        })
      }
    })
  }

  const getProfitModelInfoFun = (id) => {
    profitModelInfoFun({
      id
    }).then(res => {
      if (res?.data?.code === 200) {
        setYlList(res?.data?.result || [])
      }
    })
  }

  const handleProduct = (val) => {
    setTypeId(val.id)
  }


  const handleBigMenu = (val) => {
    setBigMenuId(val.id)
    setSmallMenu(val.list)
    setSmallMenuId(val.list[0]?.id)
  }


  const handleSmallMenu = (val) => {
    setSmallMenuId(val.id)
  }

  const handleHotKeyword = () => {

  }

  const handleFcZSSlider = (val) => {
    setFcSliderZSVal(val)

    dispatch(set_params({
      ...params,
      wordsNum: FcSliderZSVal
    }))
  }

  const handleFcPSSlider = (val) => {
    setFcSliderPSVal(val)

    dispatch(set_params({
      ...params,
      articlesNum: FcSliderPSVal
    }))
  }

  const getProductGroup = (val) => {
    console.log(val);
    // dispatch(set_params({
    //     ...params,
    //     groupId: val.id
    // }))

    setProductGroupItem(val)
    console.log(productGroupItem,'---');
    setOpenProductGroup(false)
    productRefetch()
  }

  const getProductName = (val) => {
    setProductNameItem(val)
    setOpenProduct(false)
    getProfitModelInfoFun(val.id)

    dispatch(set_params({
      ...params,
      groupId: val.id
    }))
  }

  const getProductYL = (val) => {
    dispatch(set_params({
      ...params,
      profitModelId: val.id
    }))
    setYlItem(val)
    setOpenProductYL(false)
  }

  const handleBwTextChange = (val) => {
    setBwText(val)
    dispatch(set_params({
      ...params,
      text: val
    }))
  }


  function handleTextType(item): void {
    console.log(item);
    setTextTypeId(item.label)
    setZdyList(item?.list || [])
    let id = [item?.list[0]?.id]
    setSelectedItems([id])

    dispatch(set_params({
      ...params,
      templateId: id.toString()
    }))
  }

  function handleBanBenType(item: { name: string; id: number; }): void {
    setBanBenTypeId(item.id)
  }

  function handleSelectItem(id: number) {
    if (selectedItems.includes(id)) {
      setSelectedItems(selectedItems.filter(item => item !== id));
    } else {
      setSelectedItems([...selectedItems, id]);
    }

    dispatch(set_params({
      ...params,
      templateId: selectedItems.toString()
    }))
  }

  function isSelected(id) {
    return selectedItems.includes(id)
  }

  const focusTextInput = () => {
    setColors(['rgba(51,77,176,1)', 'rgba(198,94,253,1)'])
  }
  const blurTextInput = () => {
    setColors(['white', 'white'])
  }

  const getVideoLink = async () => {
    // 调用相机或者相册选择视频
    // const { uri } = await Video.launchCamera({ mediaType: 'video' });
    // console.log(uri);
  }

  const handleProductGroup = () => {
    setGroupSearchText('')
    setOpenProductGroup(true)
    groupRefetch()
  }

  const handleProdut = () => {
    setProductSearchText('')
    setOpenProduct(true)
    productRefetch()
  }

  // @ts-ignore
  return (
      <FcView style={styles.container}>
        <FormTitle style={{paddingHorizontal: 16,paddingTop: 20}}
                   leftStyle={{alignItems: "flex-start",width: '100%'}}
                   titleStyle={{marginTop: -4}}
                   isLeftIcon title={url}/>
        <TextInput
            style={[styles.bw_txt, {height: 200}]}
            multiline={true}
            // numberOfLines={4}
            onChangeText={handleBwTextChange}
            value={text}
            placeholderTextColor={'rgba(0, 0, 0, 0.3)'}
            placeholder={'输入/粘贴你的视频文案'}
        />

        <FormTitle style={{paddingHorizontal: 16,marginTop: 16}} isLeftIcon title='选私有库关联产品'
                   titleHint='选择的产品会关联私有资料库'/>
        <Flex wrap='wrap' style={styles.big_menu}>
          {typeList?.map((item, index) =>
              <FcButton
                  key={index}
                  onClick={() => handleProduct(item)}
                  type={typeId === item.id ? 'txtBK' : 'default'}
                  style={[styles.big_menu_item]}
                  itemStyle={{width: '100%', height: '100%'}}
                  textName={item.name} borderWidth={1}></FcButton>
          )}
        </Flex>

        <View style={{paddingHorizontal: 16}}>
          <FormTitle style={{marginTop: 8}} title='选产品分组'/>
          <TouchableOpacity onPress={() => handleProductGroup(true)}>
            <View style={styles.item_wrap}>
              <Text
                  style={[productGroupItem.name ? styles.item_label : styles.item_hint]}>{productGroupItem.name || '请选择'}</Text>
              <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: '#79797A'}}>&#xe609;</Text>
            </View>
          </TouchableOpacity>

          <FormTitle style={{marginTop: 8}} title='选产品名称'/>
          <TouchableOpacity onPress={() => handleProdut()}>
            <View style={styles.item_wrap}>
              <Text
                  style={[productNameItem.name ? styles.item_label : styles.item_hint]}>{productNameItem.name || '请选择'}</Text>
              <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: '#79797A'}}>&#xe609;</Text>
            </View>
          </TouchableOpacity>

          <FormTitle style={{marginTop: 8}} title='选盈利模式'/>
          <TouchableOpacity onPress={() => setOpenProductYL(true)}>
            <View style={styles.item_wrap}>
              <Text style={[ylItem.typeName ? styles.item_label : styles.item_hint]}>{ylItem.typeName || '请选择'}</Text>
              <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: '#79797A'}}>&#xe609;</Text>
            </View>
          </TouchableOpacity>
        </View>

        <FormTitle style={{paddingHorizontal: 16, marginTop: 8}} isLeftIcon title='选文案类型'/>
        <Flex wrap='wrap' style={styles.big_menu}>
          {textTypeList?.map((item, index) =>
              <FcButton
                  key={index}
                  onClick={() => handleTextType(item)}
                  type={textTypeId === item.label ? 'txtBK' : 'default'}
                  style={[styles.big_menu_item]}
                  itemStyle={{width: '100%', height: '100%'}}
                  textName={item.label} borderWidth={1}></FcButton>
          )}
        </Flex>
        <FormTitle style={{paddingHorizontal: 16, marginTop: 8}} isLeftIcon title='选版本类型'/>
        <Flex wrap='wrap' style={styles.big_menu}>
          {banBenTypeList?.map((item, index) =>
              <FcButton
                  key={index}
                  onClick={() => handleBanBenType(item)}
                  type={banBenTypeId === item.id ? 'txtBK' : 'default'}
                  style={[styles.big_menu_item]}
                  itemStyle={{width: '100%', height: '100%'}}
                  textName={item.name} borderWidth={1}></FcButton>
          )}
        </Flex>

        {
            banBenTypeId === 2 && <>
              <View style={styles.small_menu}></View>

              <View style={styles.list_wrap}>
                {zdyList.map((item, index) => (
                    <TouchableOpacity onPress={() => handleSelectItem(item.id)} key={index}>
                      <Text style={[styles.list_item, isSelected(item.id) && styles.list_active]}>{item.name}</Text>
                    </TouchableOpacity>
                ))}
              </View>
            </>
        }

        <View style={{paddingHorizontal: 16}}>

          <FormTitle title='单篇字数'
                     style={{marginBottom: 8, marginTop: 4}}
                     right={
                       <View style={styles.slider_wrap}>
                         <TextInput style={styles.slider_input} value={FcSliderZSVal + ''}></TextInput>
                         <Text style={styles.slider_txt}>个</Text>
                       </View>
                     }/>
          <FcSlider value={FcSliderZSVal} showMinMax min={100} max={500} onFcSlider={handleFcZSSlider}/>

          <FormTitle title='输出篇数'
                     style={{marginBottom: 8, paddingTop: 32}}
                     right={
                       <View style={styles.slider_wrap}>
                         <TextInput style={styles.slider_input} value={FcSliderPSVal + ''}></TextInput>
                         <Text style={styles.slider_txt}>个</Text>
                       </View>
                     }/>
          <FcSlider value={FcSliderPSVal} showMinMax onFcSlider={handleFcPSSlider}/>
        </View>

        <FcModal
            isOpen={openProductGroup}
            onFcModalClose={() => setOpenProductGroup(false)}
            titleText='选择产品分组'
            header={<FcSearch searchText={groupSearchText} onSearch={(val) => setGroupSearchText(val)}/>}
            titleBottomBorderWidth={0}
        >
          <View>
            {groupList.map((item, index) => (
                <TouchableOpacity key={index}
                                  activeOpacity={1}
                                  style={[styles.modal_item_text, pressedIndex === index && styles.modal_item_pressed]}
                                  onPress={() => getProductGroup(item)}
                                  onPressIn={() => setPressedIndex(index)}
                                  onPressOut={() => setPressedIndex(-1)}
                >
                  <Text numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
                </TouchableOpacity>
            ))}
            {groupList?.length <= 0 &&
                <View style={{
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center',
                  paddingTop: 60,
                  paddingBottom: 120
                }}>
                  <NoData hintText='暂无分组'/>
                </View>
            }
          </View>
        </FcModal>
        <FcModal
            isOpen={openProduct}
            onFcModalClose={() => setOpenProduct(false)}
            titleText='选择产品名称'
            header={<FcSearch searchText={productSearchText} onSearch={(val) => setProductSearchText(val)}/>}
            titleBottomBorderWidth={0}
        >
          <View>
            {productList.map((item, index) => (
                <TouchableOpacity key={index}
                                  activeOpacity={1}
                                  style={[styles.modal_item_text, pressedIndex === index && styles.modal_item_pressed]}
                                  onPress={() => getProductName(item)}
                                  onPressIn={() => setPressedIndex(index)}
                                  onPressOut={() => setPressedIndex(-1)}
                >
                  <Text numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
                </TouchableOpacity>
            ))}
            {productList?.length <= 0 &&
                <View style={{
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center',
                  paddingTop: 60,
                  paddingBottom: 120
                }}>
                  <NoData hintText='暂无产品'/>
                </View>
            }
          </View>
        </FcModal>
        <FcModal
            isOpen={openProductYL}
            onFcModalClose={() => setOpenProductYL(false)}
            titleText='选择盈利模式'
            // header={<FcSearch />}
            titleBottomBorderWidth={0}
        >
          <View>
            {ylList.map((item, index) => (
                <TouchableOpacity key={index}
                                  activeOpacity={1}
                                  style={[styles.modal_item_text, pressedIndex === index && styles.modal_item_pressed]}
                                  onPress={() => getProductYL(item)}
                                  onPressIn={() => setPressedIndex(index)}
                                  onPressOut={() => setPressedIndex(-1)}
                >
                  <Text numberOfLines={1} ellipsizeMode="tail">{item.typeName}</Text>
                </TouchableOpacity>
            ))}
            {ylList?.length<=0 &&
                <View style={{flexDirection: 'column',alignItems: 'center',justifyContent: 'center',paddingTop: 30,paddingBottom: 60}}>
                  <NoData hintText='暂无盈利模式资料' />
                  <FcButton
                      onClick={() => router.navigate(`/aiFeeding`)}
                      type='BjJB'
                      colors={['#6989FF','#C65EFD']}
                      style={{width: 144,height: 32,justifyContent: 'center'}}
                      itemStyle={{borderRadius: 8}}
                      textName='去私有化资料新增'></FcButton>
                </View>
            }
          </View>
        </FcModal>
      </FcView>
  )
}

export default MorePlatformsWrap

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    borderRadius: 8,
    paddingBottom: 16,
    overflow: "hidden"
  },
  bw_txt: {
    marginHorizontal: 16,
    backgroundColor: '#F1F2F4',
    color: 'rgba(0,0,0,0.9)',
    fontSize: 15,
    lineHeight: 26,
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 8,
  },
  big_menu: {
    paddingHorizontal: 4,
    display: "flex",
    flexWrap: "wrap",
    flexDirection: "row",
  },
  big_menu_item: {
    width: 100,
    height: 40,
    lineHeight: 40,
    borderRadius: 8,
    marginHorizontal: 8,
    marginBottom: 8
  },
  small_menu: {
    paddingTop: 12,
    borderStyle: 'dashed',
    borderTopWidth: 1,
    borderColor: 'rgba(0, 0, 0, 0.1)',
    marginHorizontal: 16,
    marginTop: 12
  },
  small_menu_item: {
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 20,
    backgroundColor: '#F1F2F4',
    marginHorizontal: 8,
    marginBottom: 8,
    color: '#79797A',
    fontSize: 14
  },
  small_menu_active: {
    color: '#2856FF',
    backgroundColor: 'rgba(40, 86, 255, 0.1)'
  },
  input_wrap: {
    flexDirection: 'row',
    alignItems: "center",
    height: 56,
    borderRadius: 10,
    paddingHorizontal: 12,
    backgroundColor: '#F1F2F4',
    marginBottom: 16
  },
  input_label: {
    fontSize: 17,
    color: 'rgba(0,0,0,0.9)',
    flexDirection: 'row',
    alignItems: "center",
    marginRight: 10
  },
  input_val: {
    fontSize: 17,
    color: 'rgba(0,0,0,0.3)',
    flex: 1,
    height: '100%'
  },
  slider_wrap: {
    flexDirection: "row",
    alignItems: "center",
  },
  slider_input: {
    width: 56,
    height: 32,
    textAlign: "center",
    borderRadius: 8,
    backgroundColor: '#F1F2F4'
  },
  slider_txt: {
    marginLeft: 8,
    fontSize: 14,
    color: 'rgba(0,0,0,0.5)'
  },

  item_wrap: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: 'space-between',
    height: 56,
    paddingHorizontal: 12,
    backgroundColor: '#F1F2F4',
    borderRadius: 8
  },
  item_label: {
    fontSize: 17,
    color: 'rgba(0,0,0,0.9)'
  },
  item_hint: {
    fontSize: 17,
    color: 'rgba(0,0,0,0.3)'
  },
  modal_item_text: {
    marginHorizontal: 16,
    height: 56,
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomColor: 'rgba(0,0,0,0.1)',
    borderBottomWidth: 0.5,
    fontSize: 17,
    color: 'rgba(0,0,0,0.9)'
  },
  modal_item_pressed: {
    backgroundColor: 'rgba(0,0,0,0.05)'
  },

  list_wrap: {
    flexDirection: "row",
    flexWrap: "wrap",
    paddingHorizontal: 6,
    marginTop: 2
  },
  list_item: {
    // width: 74,
    height: 28,
    borderRadius: 8,
    backgroundColor: '#F1F2F4',
    display: 'flex',
    alignItems: "center",
    justifyContent: "center",
    fontSize: 14,
    color: 'rgba(0, 0, 0, 0.5)',
    marginHorizontal: 3,
    marginTop: 8,
    lineHeight: 18,
    paddingHorizontal: 10
  },
  list_active: {
    backgroundColor: '#E0EAFF',
    color: '#2856FF'
  },

  gradient: {
    // flex: 1,
    height: 82,
    margin: 16,
    borderRadius: 9,
    overflow: "hidden",
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 1,
    position: "relative"
  },
  video_link: {
    width: '100%',
    paddingHorizontal: 12,
    height: 80,
    borderRadius: 9,
    overflow: "hidden",
    flexDirection: "row",
    alignItems: "center",
    marginHorizontal: 37,
    backgroundColor: '#F1F2F4',
    color: 'rgba(0,0,0,0.9)',
    fontSize: 17,
    lineHeight: 26,
    paddingVertical: 8,
    borderWidth: 0, // 去掉边框
    outlineWidth: 0, // 去掉轮廓
    shadowOpacity: 0, // 去掉阴影
  },
  close: {
    width: 16,
    height: 16,
    borderRadius: '50%',
    backgroundColor: 'black',
    justifyContent: "center",
    alignItems: "center",
    position: "absolute",
    right: 10,
    top: 10,
    zIndex: 100
  }
})